﻿<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="author" content="Jxm">
	<script src="../jQuery/jquery-3.1.1.js"></script>
	<title>按钮点赞</title>

	<style type="text/css">
			img {
				width: 20px;
				height: 20px;
				position: absolute;
				bottom: 100px;
				left: 50%;
				margin-left: -10px;
			}
			
			.btn {
				width: 100px;
				height: 30px;
				border: 0;
				background: red;
				color: #fff;
				position: absolute;
				bottom: 100px;
				left: 50%;
				margin-left: -50px;
			}
		</style>

</head>

<body>
	<div class="demo"></div>
	<input id="btn1" type="button" class="btn" value="点赞" />
	</div>
</body>
<script>
		$(function () {

			$("#btn1").click(function () {
				var num = Math.floor(Math.random() * 3) + 1;
				var index = $('.demo').children('img').length;
				var rand = parseInt(Math.random() * 1200);

				$(".demo").append("<img src=''>");
				$('img').eq(index).attr('src', 'images/' + num + '.png')
				$("img").animate({
					bottom: "900px",
					opacity: "0",
					left: rand,
				}, 3000)

			})
		})
	</script>



</html>